<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商家首页</title>
    <link rel="stylesheet" href="css/bootstrap.css" />
    <style>
        /*输入框样式*/
        input[type=text] {
            width: 25%;
            padding: 12px 20px;
            margin: 8px 0;
            box-sizing: border-box;
        }
        /*表格样式*/
        #customers
        {
            font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
            width:100%;
            border-collapse:collapse;
        }
        #customers td, #customers th
        {
            font-size:1em;
            border:1px solid #98bf21;
            padding:3px 7px 2px 7px;
        }
        #customers th
        {
            font-size:1.1em;
            text-align:left;
            padding-top:5px;
            padding-bottom:4px;
            background-color:#A7C942;
            color:#ffffff;
        }
        #customers tr.alt td
        {
            color:#000000;
            background-color:#EAF2D3;
        }
        /*文本框样式*/
        textarea {
            width: 28%;
            height: 150px;
            padding: 12px 20px;
            box-sizing: border-box;
            border: 2px solid #ccc;
            border-radius: 4px;
            background-color: #f8f8f8;
            font-size: 16px;
            resize: none;
        }
        /*按钮样式*/
        .button {
            background-color: #4CAF50; /* Green */
            border: none;
            color: white;
            padding: 10px 22px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            -webkit-transition-duration: 0.4s; /* Safari */
            transition-duration: 0.4s;
            cursor: pointer;
        }

        .button1 {
            background-color: white;
            color: black;
            border: 2px solid #4CAF50;
        }

        .button1:hover {
            background-color: #4CAF50;
            color: white;
        }
    </style>
</head>
<body>
<!--
单页应用， 所有功能集成在当前页面
一般对数据的操作就是  增，删，改，查
1   打开该页时自动访问后端controller得到列表数据【查】
2   点击具体按钮时访问后端controller 执行操作【增，删，改】
3   利用DOM（不刷新页面修改页面局部内容）
4   利用异步网络请求ajax（不刷新页面在浏览器后台发送HTTP请求）
-->
<div id="displayresinfo">
    <form action="restaurant/display">
        <center>
            <a href="restaurantOrderinf.html">查看本店订单</a> <h3>&nbsp;欢迎商家登陆！</h3>
            <br>
        </center>
        <label>账户信息如下:&nbsp;&nbsp;</label>

        <table id="customers">
            <tbody  id="resdisplay">
            <!--    下面只是限定一个格式，并不会真的显示-->
            <tr>
                <th>用户名&nbsp; </th>
                <th>密码&nbsp; </th>
                <th>店铺地址&nbsp;&nbsp;</th>
                <th>店名&nbsp; </th>
                <th>操作&nbsp; </th>
            </tr>
            </tbody>
        </table>
<!--        <label th:text="${httpSession.rusername}"></label>-->
<!--        <a href="reschginfo.html?rusername=">修改信息</a>-->

    </form>
</div>
<div id="displaydisheslist">
    <div style="text-align: center;">
        <h5>本店菜品信息如下</h5>
        <br>
    </div>

<!--    插入新菜-->
    <form action="dishes/insert">
        菜品名：<input type="text" id="dname" name="dname" placeholder="请输入菜品名">
        单价：<input type="text" id="dvalue" name="dvalue" placeholder="请输入菜品单价"> 元&nbsp;&nbsp;
        菜品介绍：<input type="text" id="dintroduction" name="dintroduction" placeholder="请输入介绍"></input>
        <button class="button button1">添加新菜品</button>
    </form>

    <table class="table table-primary table-hover table-striped">
        <thead>
        <tr>
            <th>选择</th>
            <th>菜品ID</th>
            <th>菜名</th>
            <th>单价</th>
            <th>所属商家ID</th>
            <th>菜品描述</th>
            <th>操作选项</th>
        </tr>
        </thead>
        <tbody  id="display">
        <!--    下面只是限定一个格式，并不会真的显示-->
        <tr>
            <td><input type="checkbox" name="dids"></td>
            <td>did</td>
            <td>dname</td>
            <td>dprice</td>
            <td>drid</td>
            <td>dintroduction</td>
            <td>
                修改、删除按钮
            </td>
        </tr>
        </tbody>
    </table>
</div>


<script src="js/jquery-3.3.1.js"></script>
<script src="js/bootstrap.js"></script>

<script>
    //页面加载时
    $(document).ready(function () {
        //1 访问所有订单数据
        $.ajax({
            url:"restaurant/listdishes",
            dataType:"json",
            // success:function (ret){
            //     console.log(ret);
            // },
            // error:function (eno){
            //     console.log(eno);
            // }
            success:function(ret){
                console.log(ret);
                //将数据渲染到页面中
                $("#display").empty();//先清空原始内容

                let dishes = ret.dataZone.listdishes;
                //开始循环遍历
                $.each(dishes,function(index,item){
                    //遍历一次创建一个行
                    var dTr = $("<tr></tr>");
                    //依次构建单元格td
                    var checkBoxTd = $('<td><input type="checkbox" name="dids" /></td>');
                    var didTd = $('<td></td>').text(item.did);
                    var dnameTd = $('<td></td>').text(item.dname);
                    var dvalueTd = $('<td></td>').text(item.dvalue);
                    var dridTd = $('<td></td>').text(item.drid);
                    var dintroductionTd = $('<td></td>').text(item.dintroduction);
                    var updateTd = $('<td></td>').html('<a class="btn btn-info" href="dishes/change1step?did='+item.did+'">修改</a>');
                    var deleteTd = $('<td></td>').html('<a class="btn btn-danger" href="dishes/delete?did='+item.did+'">删除</a>');
                    //每次循环将创建的td追加到tr中
                    dTr.append(checkBoxTd).append(didTd).append(dnameTd).append(dvalueTd).append(dridTd).append(dintroductionTd).append(updateTd).append(deleteTd);
                    //每次循环将创建的tr追加到tbody中
                    $("#display").append(dTr); // 每次修改前端页面都需要重启服务器太浪费时间， 可以考虑热部署
                });


            },
            error:function (eno) {
                console.log(eno);
            }
        });


        $.ajax({
            url:"restaurant/display",
            dataType:"json",
            // success:function (ret){
            //     console.log(ret);
            // },
            // error:function (eno){
            //     console.log(eno);
            // }
            success:function(ret){
                console.log(ret);
                //将数据渲染到页面中
                // $("#resdisplay").empty();//先清空原始内容

                let infos = ret.dataZone.resinfos;
                //console.log(infos[1]);
                    var rTr = $("<tr></tr>");
                    //依次构建单元格td
                    var rusernameTd = $('<td></td>').text(infos[0]);
                    var rpassTd = $('<td></td>').text(infos[1]);
                    var raddressTd = $('<td></td>').text(infos[2]);
                    var rnameTd = $('<td></td>').text(infos[3]);
                    var updateTd = $('<td></td>').html('<a class="btn btn-info" href="reschginfo.html">&nbsp;修改</a>');
                    //每次循环将创建的td追加到tr中
                    rTr.append(rusernameTd).append(rpassTd).append(raddressTd).append(rnameTd).append(updateTd);
                    //每次循环将创建的tr追加到tbody中
                $('#resdisplay').append(rTr); // 每次修改前端页面都需要重启服务器太浪费时间， 可以考虑热部署
                console.log(rTr);
            },
            error:function (eno) {
                console.log(eno);
            }
        });

    });
</script>


</body>
</html>
